<template>
  <div class="container">
    <view :animation="photoAnimation" class="photo-box" @touchstart="touchStart" @touchend="touchEnd"
          @touchmove="touchmove" @click="goDetail(people[photoIndex])">
      <image class="cover-top" src="/static/images/component/cover-top.png"/>
      <image class="photo" mode="aspectFill" :src="people[photoIndex].photo[0]" @load="loadImage"/>
      <image class="cover-bottom" src="/static/images/component/cover-bottom.png"/>
      <text class="name">
        {{people[photoIndex].detail.name}}
      </text>
      <text class="age">
        {{age}}岁
      </text>
      <image class="heart"
             :src="heartFlag?'/static/images/component/heartbeat-active.png':'/static/images/component/heartbeat.png'"
             @click="heartbeat"/>
    </view>
  </div>
</template>

<script>
  let startPoint = [0, 0];//起始坐标
  let distance = 0;
  let windowWidth = Math.abs(wx.getSystemInfoSync().windowWidth);
  let windowHeight = Math.abs(wx.getSystemInfoSync().windowHeight);
  export default {
    data() {
      return {
        heartFlag: false,
        angle: 0,
        rotatePoint: 0,
        photoAnimation: null,
        photoIndex: 0,
        people: []
      }
    },
    computed: {
      user() {
        return this.$store.state.user
      },
      age(){
        try {
          let birthDate=new Date(this.people[this.photoIndex].detail.birth);
          let nowDate=new Date();
          return parseInt(nowDate.getFullYear()-birthDate.getFullYear());
        }catch (e) {
          return 0;
        }
      }
    },
    watch: {
      user: function (data) {
        var that = this;
        var gender = data.detail.gender == '男' ? '女' : '男';
        this.database.collection('user').where({
          detail: {
            gender: gender
          }
        }).limit(10).get().then(result => {
          that.people=that.people.concat(result.data);
        })
      }
    },
    components: {},
    methods: {
      touchStart(e) {
        e.stopPropagation();//组织冒泡
        e.preventDefault();//阻止浏览器默认事件
        startPoint = [e.touches[0].pageX, e.touches[0].pageY];
      },
      touchmove(e) {
        var animation = wx.createAnimation({
          duration: 200,
          delay: 0,
          timingFunction: "ease",
        });
        var curPoint = [e.touches[0].pageX, e.touches[0].pageY];
        distance = curPoint[0] - startPoint[0];
        this.angle = (20 * distance / windowWidth).toFixed(2);
        var point = this.calcu(this.angle);
        animation.translate(point[0], point[1]);
        animation.rotate(this.angle).step()
        this.photoAnimation = animation.export();
        //this.opacity=1-(Math.abs(distance/(windowWidth))).toFixed(2);
      },
      touchEnd(e) {
        var animation = wx.createAnimation({
          duration: 100,
          delay: 0,
          timingFunction: "ease",
        });
        var change = false;
        if (Math.abs(distance / windowWidth) > 0.4) {
          if (distance > 0) {
            if (this.photoIndex >= 1) {
              this.photoIndex -= 1;
              change = true;
            }
          } else if (this.people.length - 1 > this.photoIndex) {
            this.photoIndex += 1;
            change = true;
          }
        }
        startPoint = [0, 0];
        distance = 0;
        this.angle = 0;
        this.rotatePoint = 0;
        animation.translate(0, 0);
        animation.opacity(change ? 0 : 1);
        animation.rotate(0).step()
        this.photoAnimation = animation.export();

      },
      loadImage() {
        var animation = wx.createAnimation({
          duration: 1000,
          delay: 0,
          timingFunction: "ease",
        });
        animation.opacity(1).step();
        this.photoAnimation = animation.export();
      },
      goDetail(data) {
        if (!this.user.base) {
          this.$openWin('/pages/auth/main');
        } else {
          this.$openWin('/pages/detail/main?people='+JSON.stringify(data));
        }
      },
      heartbeat() {
        if (this.heartFlag) {
          wx.showToast({
            title: '取消收藏',
            icon: 'success',
            duration: 1500
          });
          this.heartFlag = false;
        } else {
          wx.showToast({
            title: '收藏成功',
            icon: 'success',
            duration: 1500
          });
          this.heartFlag = true;
        }
      },
      calcu(deg) {
        var changeX = Math.sin(2 * Math.PI / 360 * deg) * windowHeight / 2;
        var changeY = (windowHeight / 2) * (1 - Math.cos(2 * Math.PI / 360 * deg));
        return [changeX, -1 * changeY];
      }
    },
    onShow() {
      console.log("这是IndexVue-Load")

    }
  }
</script>

<style scoped>
  .container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #F7F7F7;
  }

  .photo-box {
    position: absolute;
    left: 2%;
    top: 2%;
    width: 96%;
    height: 96%;
    overflow: hidden;
  }

  .photo {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 99;
    border-radius: 2vh;
    overflow: hidden;
    box-shadow: lightgray 0px 0px 10px;
  }

  .cover-top {
    position: absolute;
    top: 0;
    width: 100%;
    height: 50vh;
    z-index: 100;
    overflow: hidden;
    border-radius: 2vh;
  }

  .cover-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30vh;
    z-index: 100;
    overflow: hidden;
    border-radius: 2vh;
  }

  .name {
    position: absolute;
    font-family: Young;
    font-size: 4vh;
    color: white;
    left: 4vh;
    bottom: 6vh;
    z-index: 110;
  }

  .age {
    position: absolute;
    font-family: Young;
    font-size: 3vh;
    color: white;
    left: 5vh;
    bottom: 2vh;
    z-index: 110;
  }

  .heart {
    position: absolute;
    width: 5vh;
    height: 5vh;
    right: 3vh;
    bottom: 2vh;
    z-index: 110;
  }
</style>
